import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import TextField from '@mui/material/TextField';
import { useState, useRef } from 'react';
import { useNavigate } from 'react-router-dom'



import './index.scss'
import { changePasswordAPI, loginAPI } from '../../apis/user';
import { setUserInfo, getUserInfo } from '../../utils/localStorage/userInfo'
import ForgetDialog from './ForgetDialog/ForgetDialog';

const Login = () => {
    const navigate = useNavigate()

    // 登录信息
    const [loginInfo, setLoginInfo] = useState({
        studentId: '',
        password: ''
    })


    // 用户登录
    const login = async () => {
        let res = await loginAPI(loginInfo)
        console.log('登录', res);
        if (res.code === 1) {
            setUserInfo(res.data)

            let userInfo = getUserInfo()
            if (userInfo.status == 0) {
                navigate('/reserveResult', { replace: true })
            } else if (userInfo.status == 1) {
                navigate('/classrooms', { replace: true })
            }

        }
    }

    // 修改学生id
    const changeStudentId = (e) => {
        setLoginInfo({
            ...loginInfo,
            studentId: e.target.value
        })
    }

    // 修改密码
    const changePassword = (e) => {
        setLoginInfo({
            ...loginInfo,
            password: e.target.value
        })
    }


    // 忘记密码对话框对象
    const forgetDialog = useRef()

    // 大开忘记密码对话框
    const handleClickToOpenDialog = () => {
        forgetDialog.current.openDialog()
    };


    return (
        <>
            <ForgetDialog ref={forgetDialog} />
            <div className='loginPage'>
                <Card style={{
                    width: '70%',
                    display: 'flex',
                    flexDirection: 'column',
                    justifyContent: 'center',
                    alignItems: 'center'
                }}>
                    <CardContent style={{
                        width: '100%',
                        display: 'flex',
                        flexDirection: 'column',
                        justifyContent: 'center',
                        alignItems: 'center'
                    }}>
                        <Typography align='center' variant="h5" gutterBottom>
                            自习室预约
                        </Typography>
                        <TextField id="studentId" onChange={changeStudentId} label="学号" variant="standard" />
                        <TextField id="password" onChange={changePassword} label="密码" variant="standard" />
                    </CardContent>
                    <CardActions>
                        <Button variant='outlined' size="large" onClick={() => {
                            login()
                        }}>登录</Button>
                    </CardActions>
                    <div style={{
                        width: '100%',
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'space-around'
                    }}>
                        <Button size="small" onClick={handleClickToOpenDialog}>忘记密码？</Button>
                        {/* <Button size="small" onClick={(params) => {
                        changePwdDialog.current.openDialog()
                    }}>修改密码</Button> */}
                    </div>

                </Card>
            </div>
        </>
    )
}

export default Login